<template>
  <div class="home">
    <el-container>
      <el-header style="height: 50px">
        <div class="title">
          <img src="favicon.jpg" style="height: 24px; vertical-align: middle" />
          <span style="vertical-align: middle">OA云协作</span>
        </div>
        <div class="curruser">
          <img
            v-if="curruser.userPhoto"
            :src="$baseUrl + '/info/emp/photo?e_id=' + curruser.userId"
            style="
              height: 30px;
              width: 30px;
              border-radius: 15px;
              vertical-align: middle;
            "
          />
          <span style="vertical-align: middle">{{ curruser.userId }}</span>
          <a style="vertical-align: middle" href="#">修改密码</a>
          <a style="vertical-align: middle" href="#" @click.prevent="logout"
            >退出</a
          >
        </div>
      </el-header>

      <el-container style="margin-top: 5px">
        <el-aside width="200px" style="position: relative">
          <!-- 导航菜单 -->
          <el-menu
            @select="handleSelect"
            style="
              position: absolute;
              left: 0px;
              right: 0px;
              top: 0px;
              bottom: 0px;
            "
          >
            <el-submenu
              v-for="menu in menus"
              :key="menu.menuId"
              :index="menu.menuId.toString()"
            >
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ menu.menuName }}</span>
              </template>

              <el-menu-item
                v-for="sub in menu.subMenus"
                :key="sub.menuId"
                :index="sub.menuUrl"
                >{{ sub.menuName }}</el-menu-item
              >
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container style="margin-left: 5px">
          <el-main style="margin-bottom: 5px">
            <!-- 在本home组件中的一个路由视图，用于显示其它组件 -->
            <router-view />
          </el-main>

          <el-footer style="height: 30px; line-height: 30px; font-size: 13px">
            版权所有：&copy; 2010-2020 索尔科技
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { api_menus, api_deleteCurrUser, api_getCurrUser } from "../api/home";
import { removeToken } from "@/common/token";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      //menus: [], //系统菜单
      curruser: {}, //当前用户
    };
  },
  computed: {
    ...mapGetters(["menus"]),
  },
  methods: {
    handleSelect(index) {
      console.log(index);
      this.$router.push(index);
    },
    logout() {
      api_deleteCurrUser().then(() => {
        removeToken();
        setTimeout(() => {
          this.$router.push("/login");
        }, 1000);
      });
    },

    getMenus() {
      api_menus().then((data) => {
        this.menus = data;
      });
    },

    getCurrUser() {
      api_getCurrUser().then((data) => {
        this.curruser = data;
      });
    },
  },
  mounted() {
    //this.getMenus(); //获取系统菜单
    this.getCurrUser(); //获取当前用户
    
  },
};
</script>

<style scoped>
.home {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;

  background-color: #f3f3f3;
}

.el-container {
  height: 100%;
}

.el-header {
  background-color: white;
  position: relative; /* 相对与自身正常位置的定位，往往设置该定位时不做任何偏移，即原位置不动，只作为子元素的定位基准。 */
}
.el-aside {
  background-color: white;
}

.el-main {
  background-color: white;
  padding: 10px;
}

.el-footer {
  background-color: white;
}

.title {
  line-height: 50px; /* 在行号范围内文字会自动垂直居中 */
  text-align: left; /* 文字居左 */
  font-size: 20px;
  font-weight: bold;
  color: #666666;
}

.curruser {
  position: absolute; /* 相对于设置了position的父元素的定位 */
  right: 10px;
  bottom: 6px;
  font-size: 14px;
}

/* .curruser>* 表示内部的所有直接子元素  */
.curruser > * {
  display: inline-block; /* 行级块：可以设置宽高和边距，同时按行排列 */
  margin-left: 10px;
}

.curruser > a:link,
.curruser > a:visited {
  text-decoration: none;
  color: #888888;
}
.curruser > a:hover {
  color: chocolate;
}
</style>